<template>
	<div class="hemo">
		<div class="box">
			<el-button type="primary" @click="selectFile">选择文件</el-button>
			<span class="loading" v-show="loading_isShow">加载数据中，请稍后</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { API } from '@v/utils/API';
import { useRootStore } from '../store';
import { getDocumentInfo, createWindow } from '../utils/ipc';

const store = useRootStore();

const loading_isShow = ref(false);

function selectFile() {
	API.invoke('select-md-file').then((paths) => {
		if (paths) {
			getDocumentInfo(paths.shift() as string);

			store.setIsWork(true);

			loading_isShow.value = true;

			if (paths.length > 0) {
				createWindow(paths);
			}
		}
	});
}
</script>

<style scoped lang="scss">
.hemo {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	.box {
		position: relative;
		.loading {
			position: absolute;
			top: calc(100% + 20px);
			left: 50%;
			transform: translateX(-50%);
			white-space: nowrap;
		}
	}
}
</style>
